<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="../../assets/lib/iview/styles/iview.css" />
    <link rel="stylesheet" type="text/css" href="../../assets/css/default.css" />
    <script src="../../assets/lib/vue/vue-2.5.17.min.js"></script>
    <script src="../../assets/lib/iview/iview.min.js"></script>
    <script src="../../assets/lib/axios/axios.min.js"></script>
    <script src="../../assets/lib/vue/plugins/tree-table.js"></script>
</head>
<body>
  <div id="app">
    <Card shadow>
      树状表格组件tree-table-vue，基于<a href="https://github.com/MisterTaki/vue-table-with-tree-grid">vue-table-with-tree-grid</a>进行开发，修复了一些bug，添加了一些新属性
      <p><b>支持使用slot-scope进行自定义列渲染内容</b></p>
      <p>文档请看<a href="https://github.com/lison16/tree-table-vue">https://github.com/lison16/tree-table-vue</a></p>
      <div>
          <p>stripe <i-switch v-model="stripe"></i-switch> border <i-switch v-model="border"></i-switch> showHeader <i-switch v-model="showHeader"></i-switch></p>
          <p>showSummary <i-switch v-model="showSummary"></i-switch> showRowHover <i-switch v-model="showRowHover"> showIndex <i-switch v-model="showIndex"></i-switch></p>
          <p>treeType <i-switch v-model="treeType"></i-switch> isFold <i-switch v-model="isFold"></i-switch> expandType <i-switch v-model="expandType"></i-switch> selectable <i-switch v-model="selectable"></i-switch></p>
          <p>selectType <i-select v-model="selectType" style="width:200px">
              <i-option value="checkbox">checkbox</i-option>
              <i-option value="radio">radio</i-option>
          </i-select></p>
        </div>

      <tree-table expand-key="sex" :show-header="showHeader" :show-index="showIndex" :stripe="stripe" :border="border" 
        :expand-type="expandType" :show-row-hover="showRowHover" :show-summary="showSummary" :tree-type="treeType"
        :is-fold="isFold" :selectable="selectable" :columns="tableData.columns" :data="tableData.data" :select-type="selectType">
        <template slot="likes" slot-scope="scope">
          <i-button @click="handle(scope)">123</i-button>
        </template>
      </tree-table>
    </Card>
  </div>
</body>

<script>
var tableData = {
  "columns": [
    {
      title: 'name',
      key: 'name',
      width: '400px'
    },
    {
      title: 'sex',
      key: 'sex',
      minWidth: '50px'
    },
    {
      title: 'score',
      key: 'score'
    },
    {
      title: 'likes',
      key: 'likes',
      minWidth: '200px',
      type: 'template',
      template: 'likes'
    }
  ],
  "data": [
    {
      name: 'Jack',
      sex: 'male',
      likes: ['football', 'basketball'],
      score: 10,
      children: [
        {
          name: 'Ashley',
          sex: 'female',
          likes: ['football', 'basketball'],
          score: 20,
          children: [
            {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20
            },
            {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10,
              children: [
                {
                  name: 'Ashley',
                  sex: 'female',
                  likes: ['football', 'basketball'],
                  score: 20
                },
                {
                  name: 'Taki',
                  sex: 'male',
                  likes: ['football', 'basketball'],
                  score: 10,
                  children: [
                    {
                      name: 'Ashley',
                      sex: 'female',
                      likes: ['football', 'basketball'],
                      score: 20
                    },
                    {
                      name: 'Taki',
                      sex: 'male',
                      likes: ['football', 'basketball'],
                      score: 10
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          name: 'Taki',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 10
        }
      ]
    },
    {
      name: 'Tom',
      sex: 'male',
      likes: ['football', 'basketball'],
      score: 20,
      children: [
        {
          name: 'Ashley',
          sex: 'female',
          likes: ['football', 'basketball'],
          score: 20,
          children: [
            {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20
            },
            {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10
            }
          ]
        },
        {
          name: 'Taki',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 10,
          children: [
            {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20
            },
            {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10
            }
          ]
        }
      ]
    },
    {
      name: 'Tom',
      sex: 'male',
      likes: ['football', 'basketball'],
      score: 20
    },
    {
      name: 'Tom',
      sex: 'male',
      likes: ['football', 'basketball'],
      score: 20,
      children: [
        {
          name: 'Ashley',
          sex: 'female',
          likes: ['football', 'basketball'],
          score: 20
        },
        {
          name: 'Taki',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 10
        }
      ]
    }
  ]
}
var vm = new Vue({
  el: "#app",
  data: function() {
    return {
       tableData: tableData,
       stripe: true,
       border: true,
       showHeader: true,
       showSummary: true,
       showRowHover: true,
       showIndex: true,
       treeType: true,
       isFold: true,
       expandType: true,
       selectable: true,
       selectType: 'radio'
    }
  },
  methods: {
    handle (scope) {
      console.log(scope)
    }
  }
});

</script>
</html> 
